<template>
	<view class="content">
		<view class="addressInfo">
			<!-- 未认证 -->
			<view v-if="user.is_owner==0" @click="$navto.navto('/pages/owner_certification/owner_certification')">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">暂无地址</text>
				</view>
				<text class="addressText">立即认证成为业主，添加房屋信息</text>
				<text class="arrow">></text>
			</view>
			<view v-else>
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{user.name}}</text>
					<text class="phone">{{user.phone}}</text>
				</view>
				<text class="addressText">{{user.floor_house_num}}</text>
				<text class="arrow">></text>
			</view>
		</view>
		<view class="infoBox">
			<view class="item">
				<text class="type">增值服务-{{data.serve_cat_name}}</text>
			</view>
			<view class="item">
				<image :src="data.cover" class="poster"></image>
				<text class="name">{{data.serve_name}}</text>
				<text class="price">￥{{data.price}}</text>
			</view>
			<view class="item">
				<text class="left">数量</text>
				<text class="right">{{data.num}}</text>
			</view>
			<block v-if="data.cat_id==2">
				<view class="item">
					<text class="left">{{planeArr[data.pick_up-1]}}航班</text>
					<text class="right">{{data.flight}}</text>
				</view>
				<view class="item">
					<text class="left">{{planeArr[data.pick_up-1]}}人数</text>
					<text class="right">{{data.pick_up_num}}</text>
				</view>
				<view class="item">
					<text class="left">{{planeArr[data.pick_up-1]}}时间</text>
					<text class="right">{{data.service_data}}/{{data.service_time}}</text>
				</view>
			</block>
			<block v-if="data.cat_id==3">
				<view class="item">
					<text class="left">车牌号</text>
					<text class="right">{{data.plate_num}}</text>
				</view>
			</block>
			<!-- <block v-if="data.cat_id==4">
				<view class="item">
					<text class="left">家电名称</text>
					<text class="right">{{data.repair_name}}</text>
				</view>
			</block> -->
			<block v-if="data.cat_id==5">
				<view class="item">
					<text class="left">车辆大小</text>
					<text class="right">{{data.vehicle_type}}</text>
				</view>
				<view class="item">
					<text class="left">有无贵重物品</text>
					<text class="right">{{valuableArr[data.not_valuables-1]}}</text>
				</view>
			</block>
			<block v-if="data.cat_id==7">
				<view class="item">
					<text class="left">保姆年龄</text>
					<text class="right">{{data.age}}</text>
				</view>
			</block>
			<block v-if="data.cat_id==8">
				<view class="item">
					<text class="left">餐厅名称</text>
					<text class="right">{{data.restaurant_name}}</text>
				</view>
				<view class="item">
					<text class="left">餐厅地址</text>
					<text class="right">{{data.restaurant_address}}</text>
				</view>
				<view class="item">
					<text class="left">点餐菜品</text>
					<text class="right">{{data.dishes}}</text>
				</view>
				<view class="item">
					<text class="left">送餐时间</text>
					<text class="right">{{data.service_data}}/{{data.service_time}}</text>
				</view>
			</block>
			<view class="item" v-if="[1, 3, 4,5,6,7].includes(data.cat_id)">
				<text class="left">上门时间</text>
				<text class="right">{{data.service_data}}/{{data.service_time}}</text>
			</view>
		</view>
		<view class="pay" @click="showModify()">
			修改订单
		</view>
		<view class="orderTimeContainer" v-if="isModify">
			<view class="orderTimeBox">
				<view class="titleBox">
					<text class="title">预定上门时间</text>
					<view class="notBlock">
					</view>
					<text class="notLabel">不可预约</text>
					<view class="canBlock">
					</view>
					<text class="canLabel">已选择</text>
				</view>
				<view class="dateBox">
					<text class="month">{{monthValue}}</text>
					<view class="triangle">
					</view>
					<view class="line">
					</view>
					<scroll-view class="dateScrollBox" scroll-x="true" :scroll-into-view="dateId">
						<view class="dateItem" :class="dateIndex==index?'dateActive':''" :id="`item-${index}`"
							v-for="(item,index) in dateArr" :key="index" @click="selDate(index)">
							{{item}}
						</view>
					</scroll-view>
					<uni-section class="selecteMonth">
						<uni-data-select v-mode="monthValue" :localdata="month" @change="changeMonth()" />
						</uni-data-select>
					</uni-section>
				</view>
				<view class="timeBox">
					<scroll-view class="timeScrollBox" scroll-x="true" :scroll-into-view="timeId">
						<view class="timeItem" :class="{'tiemActive': timeIndex === index,'timeDisable': !item.status}"
							:id="`item-${index}`" v-for="(item,index) in timeArr" :key="index"
							@click="selTime(index,item.status)">
							{{item.time_frame}}
						</view>
					</scroll-view>
				</view>
				<view class="btnBox">
					<view class="modify" @click="submit">
						修改
					</view>
					<view class="cancel" @click="showModify()">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				month: [],
				monthValue: '',
				value: 0,
				id: '',
				cat_id: '',
				data: '',
				timeArr: [], //可预约时段
				timeIndex: -1,
				time: '',
				service_data: '',
				dateArr: [],
				dateIndex: -1,
				date: '',
				yearArr: [],
				nextMonth: 0,
				dateId: '',
				timeId: '',
				isModify: false,
				user: '',
				planeArr: ['接机', '送机'],
				valuableArr: ['有', '无']
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
			this.dateArr = this.$getDateRanges().currentMonthDates //赋值当前月份剩余日期
			this.yearArr[0] = this.$getCurrentAndNextMonthYear().currentMonthYear;
			this.yearArr[1] = this.$getCurrentAndNextMonthYear().nextMonthYear;
			this.month = this.$getFormattedMonths();
			this.monthValue = this.month[0].text;
			this.service_data = this.yearArr[0] + '-' + this.dateArr[0].toString()
				.padStart(2, '0');
			this.getTime()
		},
		methods: {
			getData() {
				this.$request.get(`orderRead?id=${this.id}`).then(res => {
					this.data = res.data.data;
				})
			},
			submit() {
				if (!this.date) {
					return this.$toast('请选择日期');
				}
				if (!this.time) {
					return this.$toast('请选择时间');
				}
				uni.showModal({
					title: '提示',
					content: '是否确认修改该订单',
					success: (res) => {
						if (res.confirm) {
							this.$request.post(`editOrder`, {
								id: this.data.id,
								service_data: this.service_data,
								service_time: this.time,
								server_id: this.data.server_id,
								type: 'edit'
							}).then(res => {
								if (res.data.code == 10000) {
									this.$toast('修改成功');
									setTimeout(() => {
										this.showModify();
										this.getData();
									}, 1000)
								} else {
									this.$toast('修改失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			showModify() {
				this.isModify = !this.isModify;
			},
			getTime() {
				this.$request.post(`time_frame_list`, {
					service_data: this.service_data,
					server_id: this.id
				}).then(res => {
					this.timeArr = res.data.data;
				})
			},
			// 选择时间
			selTime(index, status) {
				if (!status) {
					return this.$toast("当前时间不可选");
				}
				this.timeIndex = index;
				this.time = this.timeArr[index].time_frame;

			},
			// 选择日期
			selDate(index, status) {
				this.dateIndex = index;
				this.date = this.dateArr[index];
				this.dateArr = this.$getDateRanges().currentMonthDates;
				if (this.nextMonth == 0) {
					this.service_data = this.yearArr[0] + '-' + this.date.toString().padStart(2, '0');
				} else {
					this.service_data = this.yearArr[1] + '-' + this.date.toString().padStart(2, '0');
				}
				this.getTime();
			},
			// 选择月份
			changeMonth(e) {
				this.timeIndex = -1;
				this.dateIndex = -1;
				if (e == 0) { //当前月份
					this.nextMonth = 0;
					console.log(this.$getCurrentAndNextMonthYear().currentMonthYear);
					this.dateArr = this.$getDateRanges().currentMonthDates;
					this.service_data = this.yearArr[0] + '-' + this.dateArr[0].toString().padStart(2, '0');
				} else { //下个月
					this.nextMonth = 1;
					console.log(this.$getCurrentAndNextMonthYear().nextMonthYear);
					this.dateArr = this.$getDateRanges().nextMonthDates;
					this.service_data = this.yearArr[1] + '-' + this.dateArr[0].toString().padStart(2, '0');
				}
				this.monthValue = this.month[e].text;
				this.getTime();
				this.dateId = 'item-0';
				this.timeId = 'item-0';
				setTimeout(() => {
					this.dateId = '';
					this.timeId = '';
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 165rpx;
		margin-left: 40rpx;
	}

	.orderTimeContainer {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);

		.orderTimeBox {
			position: absolute;
			bottom: 0;
			width: 750rpx;
			background: #ffffff;
			padding: 60rpx 40rpx 75rpx 40rpx;

			.btnBox {
				width: 670rpx;
				height: 86rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 115rpx;

				.cancel {
					width: 324rpx;
					height: 86rpx;
					border-radius: 43rpx;
					border: 1rpx solid #121212;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 700;
					font-size: 26rpx;
					color: #121212;
					box-sizing: border-box;
				}

				.modify {
					width: 324rpx;
					height: 86rpx;
					border-radius: 43rpx;
					background: #121212;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 700;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}

			.timeBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-top: 58rpx;

				.timeScrollBox {
					// width: 450rpx;
					overflow-x: scroll;
					display: flex;
					white-space: nowrap;

					.timeItem {
						// height: 50rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #121212;
						margin-right: 75rpx;
						flex: 0 0 auto;
						display: inline-flex;
					}

					.tiemActive {
						color: #FF6E5D;
						font-weight: 900;
						// border-bottom: 4rpx solid #FF6E5D;
					}

					.timeDisable {
						color: #8E8E8E;
					}
				}
			}

			.dateBox {
				position: relative;
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-top: 58rpx;
				padding-bottom: 58rpx;
				border-bottom: 1rpx solid #121212;

				.selecteMonth {
					position: absolute;
					left: 0rpx;
					width: 120rpx;
					height: 50%;
				}

				.dateScrollBox {
					// width: 450rpx;
					margin-left: 54rpx;
					display: flex;
					white-space: nowrap;
					overflow-x: scroll;

					.dateItem {
						width: 80rpx;
						height: 80rpx;
						border: 1rpx solid #121212;
						border-radius: 50%;
						display: flex;
						font-weight: 500;
						font-size: 26rpx;
						color: #121212;
						align-items: center;
						justify-content: center;
						margin-right: 33rpx;
						flex: 0 0 auto;
						box-sizing: border-box;
						display: inline-flex;
					}

					.dateActive {
						background: #FF6E5D;
						// border: none;
						color: #ffffff;
						border: 1rpx solid #FF6E5D;
					}

					.dateDisable {
						background: #f0f0f0;
						border: none;
					}
				}

				.line {
					width: 1rpx;
					height: 44rpx;
					background: #c7c7c7;
					margin-left: 50rpx;
				}

				.triangle {
					width: 24rpx;
					height: 18rpx;
					background: #121212;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}

				.month {
					width: 150rpx;
					text-align: center;
					font-weight: 700;
					font-size: 30rpx;
					color: #121212;
					white-space: nowrap;
				}
			}

			.titleBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-bottom: 53rpx;
				border-bottom: 1rpx solid #121212;

				.title {
					font-weight: 700;
					font-size: 26rpx;
					color: #121212;
				}

				.notBlock {
					width: 17rpx;
					height: 17rpx;
					background: #f0f0f0;
					margin-left: 265rpx;
				}

				.notLabel {
					font-weight: 500;
					font-size: 20rpx;
					color: #8E8E8E;
					margin-left: 14rpx;
				}

				.canBlock {
					width: 17rpx;
					height: 17rpx;
					background: #FF6E5D;
					margin-left: 46rpx;
				}

				.canLabel {
					font-weight: 500;
					font-size: 20rpx;
					color: #121212;
					margin-left: auto;
				}
			}
		}
	}

	::v-deep .uni-select {
		border: none;
	}

	::v-deep .uni-select .uni-icons {
	  display: none;
	}

	::v-deep .uni-select__input-box {
		opacity: 0 !important;
	}

	.infoBox {
		background: #ffffff;
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 25rpx;

		.item {
			position: relative;
			padding-top: 45rpx;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
			display: flex;
			justify-content: space-between;

			.selecteCar {
				position: absolute;
				right: 0rpx;
				width: 200rpx;
				height: 100%;
			}

			.itemArrow {
				position: absolute;
				right: 0rpx;
				font-size: 24rpx;
				top: 50rpx;
				color: #8E8E8E;
			}

			.right {
				// margin-right: 40rpx;
			}

			.countNumBox {
				display: flex;
				align-items: center;

				.add {
					display: flex;
					justify-content: center;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 40rpx;
					width: 40rpx;
					border-radius: 50%;
					border: 1rpx solid #121212;
				}

				.reduce {
					display: flex;
					justify-content: center;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 40rpx;
					width: 40rpx;
					border-radius: 50%;
					border: 1rpx solid #121212;
				}

				.countNum {
					width: 50rpx;
					text-align: center;
					font-size: 30rpx;
					margin-left: 10rpx;
					margin-right: 10rpx
				}
			}

			.price {
				position: absolute;
				color: #121212;
				font-weight: 700;
				font-size: 22rpx;
				letter-spacing: 4rpx;
				left: 277rpx;
				top: 135rpx;
			}

			.name {
				position: absolute;
				left: 277rpx;
				top: 58rpx;
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
				letter-spacing: 6rpx;
			}

			.poster {
				width: 200rpx;
				height: 150rpx;
			}

			.type {
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.addressBox {
		margin-top: 20rpx;
		width: 750rpx;
		background: #ffffff;
		padding-top: 50rpx;
		padding-bottom: 50rpx;

		.arrow {
			position: absolute;
			right: 40rpx;
			font-size: 24rpx;
			top: 90rpx;
			color: #8E8E8E;
		}

		.addressInfo {
			font-weight: 500;
			font-size: 22rpx;
			color: #8E8E8E;
			margin-left: 97rpx;
			margin-top: 32rpx;
		}

		.topBox {
			display: flex;
			overflow: hidden;
			align-items: center;

			.addressIcon {
				width: 22rpx;
				height: 28rpx;
				margin-left: 40rpx;
			}

			.name {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}

			.phone {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}
		}
	}

	.addressInfo {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		overflow: hidden;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		position: relative;

		.arrow {
			position: absolute;
			font-size: 24rpx;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #8E8E8E;
		}

		.topBox {
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.addressIcon {
				width: 22rpx;
				height: 28rpx;
			}

			.name {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}

			.phone {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}
		}

		.addressText {
			margin-top: 30rpx;
			margin-left: 100rpx;
			font-size: 24rpx;
			color: #8E8E8E;
			display: inline-block;
		}

	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
		overflow: scroll;
		padding-bottom: 150rpx;
	}
</style>